<template>
  <div class="body">
    <section class="download-banner">
      <div class="index-bannerMain clearfix center-block">
        <div class="index-title pull-left">
          <h2>下载专区</h2>
        </div>
      </div>
    </section>

    <section class="agency_download">
      <div class="center-block">
        <div id="QuaT1" class="QuaT center-block">
          <h3 class="circular-title"></h3>
          <div id="QuaTle1" class="QuaTle Q_left blockSelect">
            <span
              data-value
              @click="tabTo(index)"
              :class="{active:index==ids}"
              v-for="(item,index) in downList"
              :key="index"
            >{{item}}</span>
          </div>
        </div>
        <div id="QuaBoy1" class="QuaBoy">
          <section id="download" :class="ids==0?'active':''">
            <ul class="download-list clearfix">
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
            </ul>
            <div style="padding: 20px 0">
              <div class="fenYe clearfix">
                <div class="fenYeL">
                  <span>共400条</span>
                  <select class="fenYeSelect">
                    <option value="100">10条/页</option>
                    <option value="100">20条/页</option>
                    <option value="100">30条/页</option>
                    <option value="100">40条/页</option>
                    <option value="100">50条/页</option>
                    <option value="100">100条/页</option>
                  </select>
                </div>
                <div class="input_sub">
                  <span>前往</span>
                  <input type="text" />
                  <span>页</span>
                  <button>确认</button>
                </div>
                <ul class="clearfix">
                  <li>
                    <a href>1</a>
                  </li>
                  <li class="active">
                    <a href>2</a>
                  </li>
                  <li>
                    <a href>3</a>
                  </li>
                  <li>
                    <a href>4</a>
                  </li>
                  <li>
                    <a href>5</a>
                  </li>
                  <li>...</li>
                  <li>
                    <a href>90</a>
                  </li>
                </ul>
              </div>
            </div>
          </section>
          <section :class="ids==1?'active':''">
            <ul class="download-list clearfix">
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
            </ul>
            <div style="padding: 20px 0">
              <div class="fenYe clearfix">
                <div class="fenYeL">
                  <span>共400条</span>
                  <select class="fenYeSelect">
                    <option value="100">10条/页</option>
                    <option value="100">20条/页</option>
                    <option value="100">30条/页</option>
                    <option value="100">40条/页</option>
                    <option value="100">50条/页</option>
                    <option value="100">100条/页</option>
                  </select>
                </div>
                <div class="input_sub">
                  <span>前往</span>
                  <input type="text" />
                  <span>页</span>
                  <button>确认</button>
                </div>
                <ul class="clearfix">
                  <li>
                    <a href>1</a>
                  </li>
                  <li class="active">
                    <a href>2</a>
                  </li>
                  <li>
                    <a href>3</a>
                  </li>
                  <li>
                    <a href>4</a>
                  </li>
                  <li>
                    <a href>5</a>
                  </li>
                  <li>...</li>
                  <li>
                    <a href>90</a>
                  </li>
                </ul>
              </div>
            </div>
          </section>
          <section :class="ids==2?'active':''">
            <ul class="download-list clearfix">
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
            </ul>
            <div style="padding: 20px 0">
              <div class="fenYe clearfix">
                <div class="fenYeL">
                  <span>共400条</span>
                  <select class="fenYeSelect">
                    <option value="100">10条/页</option>
                    <option value="100">20条/页</option>
                    <option value="100">30条/页</option>
                    <option value="100">40条/页</option>
                    <option value="100">50条/页</option>
                    <option value="100">100条/页</option>
                  </select>
                </div>
                <div class="input_sub">
                  <span>前往</span>
                  <input type="text" />
                  <span>页</span>
                  <button>确认</button>
                </div>
                <ul class="clearfix">
                  <li>
                    <a href>1</a>
                  </li>
                  <li class="active">
                    <a href>2</a>
                  </li>
                  <li>
                    <a href>3</a>
                  </li>
                  <li>
                    <a href>4</a>
                  </li>
                  <li>
                    <a href>5</a>
                  </li>
                  <li>...</li>
                  <li>
                    <a href>90</a>
                  </li>
                </ul>
              </div>
            </div>
          </section>
          <section :class="ids==3?'active':''">
            <ul class="download-list clearfix">
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
              <li>
                <div class="text">南昌市建设工程行政审批网上办事大厅操作培训PPT V3.0</div>
                <a href="javascript:;">
                  <i class="dtFont dtFont-xiazai"></i>立即下载
                </a>
              </li>
            </ul>
            <!-- 分页区域 -->
            <div style="padding: 20px 0">
              <div class="fenYe clearfix">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="tableQuery.page"
                  :page-sizes="[10, 15, 20, 25]"
                  :page-size="tableQuery.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                ></el-pagination>
              </div>
            </div>
          </section>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
// 获取表格数据
import { getTableList } from "@/api/projectApproval/index.js";

export default {
  name: "download",
  data: function() {
    return {
      ids: 0,
      downList: ["平台指南", "合同模板", "申请表单", "其他资料"],
      tableQuery: {
        page: 1,
        pageSize: 2
      },
      total: 10
    };
  },
  methods: {
    // 获得表格数据
    getTableList() {
      getTableList().then(res => {
        // console.log(res);
        this.tableList = res.obj.rows;
        this.total = res.obj.total;
      });
    },
    // 分页中右边点击事件
    handleSizeChange(newSize) {
      this.tableQuery.page = newSize;
      this.getTableList();
      // console.log( this.tableQuery.page);
    },
    // 左边栏第几页的数据
    handleCurrentChange(newPage) {
      // this.tableQuery.pageSize=newPage
      // this.getTableList();
    },
    tabTo(num) {
      this.ids = num;
    }
  },
  mounted() {
    // 跳转后显示头部
    this.$router.afterEach((to, from, next) => {
      window.scrollTo(0, 0);
    });
  }
};
</script>

<style scoped>
@import "../../../assets/css/agency.css";
</style>
